<template>
  <!-- 数据可视化首页 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>{{ title }}</p>
        <el-date-picker
          v-model="yearStr"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
        <button class="export" @click="exportData">导出</button>
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-tabs v-model="currentTable" class="statistics-tab">
        <el-tab-pane label="地貌类型" name="0">
          <landforms ref="landforms" :table-list="ProInfoByLandForm" />
        </el-tab-pane>
        <el-tab-pane label="地区类型" name="1">
          <region ref="region" :table-list="ProInfoByArea" />
        </el-tab-pane>
        <el-tab-pane label="项目类型" name="2">
          <projectType ref="projectType" :table-list="ProInfoByProType" />
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script>
import { selectProInfoByLandForm, selectProInfoByArea, selectProInfoByProType } from '@/api/statisticalAnalysis/statistics/project'
import landforms from './landforms'
import projectType from './projectType'
import region from './region'
export default {
  name: 'Project',
  components: {
    landforms,
    projectType,
    region
  },
  data() {
    return {
      title: '',
      tableData: [],
      yearStr: '',
      currentTable: '0',
      options: [
        { value: '0', label: '地貌类型' },
        { value: '1', label: '地区类型' },
        { value: '2', label: '项目类型' }
      ],
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      ProInfoByLandForm: [],
      ProInfoByArea: [],
      ProInfoByProType: []
    }
  },
  watch: {
    currentTable: {
      immediate: true,
      deep: true,
      handler(val) {
        switch (val) {
          case '0':
            this.title = '地貌类型'
            this.getProInfoByLandFormList()
            break
          case '1':
            this.title = '地区类型'
            this.getProInfoByAreaList()
            break
          case '2':
            this.title = '项目类型'
            this.getProInfoByProTypeList()
            break
          default:
            return '项目统计信息'
        }
      }
    }
  },
  mounted() {
    this.currentTable = this.$route.params.currentTable ? this.$route.params.currentTable : '0'
  },
  methods: {
    // 获取地貌类型数据
    async getProInfoByLandFormList() {
      const { data } = await selectProInfoByLandForm(this.filter)
      this.ProInfoByLandForm = data
    },
    // 获取地区类型数据
    async getProInfoByAreaList() {
      const { data } = await selectProInfoByArea(this.filter)
      this.ProInfoByArea = data
    },
    // 获取项目类型数据
    async getProInfoByProTypeList() {
      const { data } = await selectProInfoByProType(this.filter)
      this.ProInfoByProType = data
    },
    // 时间变化
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      switch (this.currentTable) {
        case '0':
          this.getProInfoByLandFormList()
          break
        case '1':
          this.getProInfoByAreaList()
          break
        case '2':
          this.getProInfoByProTypeList()
          break
      }
    },
    // 导出
    exportData() {
      const c = this.currentTable
      if (c === '0') {
        this.$refs.landforms.exportData()
      } else if (c === '1') {
        this.$refs.region.exportData()
      } else if (c === '2') {
        this.$refs.projectType.exportData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
